<template>
  <view class="main">
    <view class="top">
      <search leftWidth='300' bgColor='black'>
        <blockquote @click='goBack' slot="leftMain">
          <view class="left">
            <u-icon name="arrow-left" color="white" size="28"></u-icon> <text>收藏列表</text>
          </view>
        </blockquote>
      </search>
    </view>
    <view class="abottom">
      <view class="u-page__item">
        <u-collapse accordion>
          <u-collapse-item title="我的收藏(收藏自己的记录)">
            <blockquote v-show="scList.filter(i=>i.userInfo[0]._id==userinfo._id).length!=0">
              <view v-for="(e,i) in scList.filter(i=>i.userInfo[0]._id==userinfo._id)" :key="e._id"
                class="u-demo-block__content">
                <view class="album">
                  <u-image width="84rpx" height="84rpx" :src="basesrc+e.userInfo[0].avator" :lazy-load="true"></u-image>
                  <view class="album__content">
                    <u--text :text="e&&e.userInfo[0].nickname" type="primary" size="17"></u--text>
                    <u--text :text="e.articleInfo[0].createTime" margin=" 16rpx 0" color="gray" size="12"></u--text>
                    <u--text margin="0 0 16rpx 0" color="black" :text="e.articleInfo[0].content"></u--text>
                    <u-album multipleSize='100' multipleMode="aspectFill" v-if='e.articleInfo[0].imgs.length!=0'
                      :urls="dealImgs(e.articleInfo[0].imgs)"></u-album>
                  </view>
                </view>
              </view>
            </blockquote>
            <blockquote v-show="scList.filter(i=>i.userInfo[0]._id==userinfo._id).length==0">
              <text style="color:#cccccc">暂无收藏自己的记录</text>
            </blockquote>
          </u-collapse-item>
          <u-collapse-item title="其他收藏(收藏别人的记录)">
            <blockquote v-if="scList.filter(i=>i.userInfo[0]._id!=userinfo._id).length!=0">
              <view v-for="(e,i) in scList.filter(i=>i.userInfo[0]._id!=userinfo._id)" :key="e._id"
                class="u-demo-block__content">
                <view class="album">
                  <u-image width="84rpx" height="84rpx" :src="basesrc+e.userInfo[0].avator" :lazy-load="true"></u-image>
                  <view class="album__content">
                    <u--text :text="e&&e.userInfo[0].nickname" type="primary" size="17"></u--text>
                    <u--text :text="e.articleInfo[0].createTime" margin=" 16rpx 0" color="gray" size="12"></u--text>
                    <u--text margin="0 0 16rpx 0" color="black" :text="e.articleInfo[0].content"></u--text>
                    <u-album multipleSize='100' multipleMode="aspectFill" v-if='e.articleInfo[0].imgs.length!=0'
                      :urls="dealImgs(e.articleInfo[0].imgs)"></u-album>
                  </view>
                </view>
              </view>
            </blockquote>
            <blockquote v-else>
              <text>暂无收藏他人的记录</text>
            </blockquote>
          </u-collapse-item>
        </u-collapse>
      </view>
    </view>
  </view>
</template>

<script>
  import search from "@/component/search/search.vue";
  import {
    mapState,
    mapMutations
  } from "vuex"
  import {
    cmode
  } from '@/env.js'
  import {
    getshoucanglist
  } from '@/api/user.js'
  export default {
    components: {
      search
    },
    data() {
      return {
        scList: [],
        basesrc: cmode,
      };
    },
    computed: {
      ...mapState("m_login", ["userinfo"]),
      dealImgs() {
        return function(data) {
          if (data) {
            return data.map(e => this.basesrc + e)
          } else {
            return []
          }
        };
      }
    },
    methods: {
      ...mapMutations("m_login", ["setUserInfo"]),
      cgetshoucanglist() {
        getshoucanglist().then(res => {
          this.scList = res.data
          console.log(this.scList);
        })
      },

      goBack() {
        this.$Router.back()
      },
    },
    onShow() {
      this.cgetshoucanglist()
    },
    onReady() {
      this.cgetshoucanglist()
    }
  }
</script>

<style lang="scss" scoped>
  .u-demo-block__content {
    width: 700rpx;
    margin: 100rpx auto;
    height: 500rpx;

    .album {
      color: white;
      display: flex;
      align-items: flex-start;

      &__avatar {
        background-color: $u-bg-color;
        padding: 10rpx;
        border-radius: 6rpx;
      }

      &__content {
        margin-left: 40rpx;
        flex: 1;
      }
    }


  }


  .item {
    padding: 0 20rpx;
    margin: 40 0rpx;

    .bot {
      margin: 20rpx 0;
    }

    .iitem {
      display: flex;
      align-items: center;
      justify-content: space-between;


      .left {
        display: flex;
        align-items: center;

        text {
          margin-left: 30rpx;
        }
      }

      .right {
        width: 80rpx;
        height: 40rpx;
        background-color: #c00000;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
      }
    }

  }

  .u-page {
    padding: 0;

    &__item {

      &__title {
        color: $u-tips-color;
        background-color: $u-bg-color;
        padding: 30rpx;
        font-size: 30rpx;

        &__slot-title {
          color: $u-primary;
          font-size: 28rpx;
        }
      }
    }
  }

  .u-collapse-content {
    color: $u-tips-color;
    font-size: 28rpx;
  }

  .main {
    width: 100vw;
    height: auto;

    .abottom {
      width: 100vw;
      height: auto;
      background-color: white;
      margin-top: calc(var(--status-bar-height) + 100rpx);
      color: black;
      box-sizing: border-box;
      font-size: 28rpx;
    }

    .top {
      width: 100vw;
      height: 100rpx;
      position: fixed;
      top: 0;
      z-index: 1;

      .left {
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }

      .right {
        display: flex;

        .dw {
          margin: 0 10rpx;
        }
      }
    }
  }
</style>
